<template>
    <div class="Personalicenter">
        <div class="conetent-nav">
            <div class="conetent-nav-head">
                <img src="/images/logo.png" class="logo" @click="Goindex()">
                <ul>
                    <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                    <!-- <li><img src="/images/气泡.png" class="conetent-nav-info"/></li> -->
                    <li class="conetent-nav-my-center">
                        <div class="login" v-if="IsLogins">
                            <el-menu class="el-menu-demo" mode="horizontal">
                                <el-submenu index="2">
                                    <img slot="title" alt="" class="title userAvatar" :src="avatar"/>
                                    <el-menu-item @click="Modify(0)">个人信息</el-menu-item>
                                    <el-menu-item @click="Logout">退出登录</el-menu-item>
                                    <!-- <template slot="title">个人中心</template> -->
                                    <!-- <el-menu-item @click="Modify(1)">账号设置</el-menu-item> -->
                                    <!-- <el-menu-item @click="Modify(0)">个人信息</el-menu-item> -->
                                    <!-- <el-menu-item >切换账号</el-menu-item> -->
                                    <!-- <el-menu-item @click="Logout">退出登录</el-menu-item> -->
                                </el-submenu>
                            </el-menu>
                        </div>
                        
                        <div class="login" v-else style="margin-top: 0px;">
                            <button @click="GoLogin">登录</button>
                            <button @click="Gozhuce">注册</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <Denglu v-if="IsLogin" :IsLogin.sync ='IsLogin' :IsLogins.sync ='IsLogins' :avatar.sync ='avatar'></Denglu>
        <router-view v-if="isRouterAlive"/>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '../../components/footer'
import TIM from 'tim-js-sdk';
import {TimLogin} from '../../components/Tim'
import Denglu from '../../components/denglu'
export default {
    name: 'Personalicenter',
    provide () {
        return {
        reload: this.reload,
        }
    },
    data(){
        return{
            tablesList:['主页','学习中心','教学中心','直播课堂','场景直播','客户端下载'],
            tablesListindex:this.$route.query.index,
            isRouterAlive: true,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            userSig:JSON.parse(localStorage.getItem('userSign')),
            IsTime:JSON.parse(localStorage.getItem('IsTiM')),
            Isend:this.$route.query.Isend,
            Teachingcentercoursedetailsid:this.$route.query.Teachingcentercoursedetailsid,
            avatar:JSON.parse(localStorage.getItem("userinfo")) == undefined?'': JSON.parse(localStorage.getItem("userinfo")).avatar,
            IsLogin:false,
            IsLogins:'',
        }
    },
    components: {//组件注册
        Footer,Denglu
    },
    created(){
        if(JSON.parse(localStorage.getItem("userinfo")) == undefined || JSON.parse(localStorage.getItem("userinfo")) == ''){
            this.IsLogins = false
        }else{
            this.IsLogins = true
        }
    },
    mounted(){
        this.TOlogin()
        this.checket(this.tablesListindex)
    },
    methods:{
        Gozhuce(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        GoLogin(){
            this.IsLogin = true
        },
        outerVisible(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        checket(e){
            
            this.tablesListindex = e
            this.$toTop()
            localStorage.setItem("tablesListindex",this.tablesListindex)
            if(this.IsLogins){
                if( this.tablesListindex == 0){
                    this.$router.push({path:'/'})
                }else if(this.tablesListindex == 1){
                    this.$router.push({path:'/views/Learningcenter/Liveclassroom'})
                }else if(this.tablesListindex == 2){
                    this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor'})
                }else if (this.tablesListindex ==3){
                    this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
                }else if(this.tablesListindex == 4){
                    this.$router.push({path:'/views/LiveScene/SceneRoomInfo'})
                }else if(this.tablesListindex == 5){
                    this.$router.push({ path: "/views/Download",query: {index: 5}});
                }else if(this.tablesListindex == 7){
                    if(this.Isend ==true){
                        this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
                    }else if(this.Isend ==false){
                        this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
                    }
                }
            }else{
                if( this.tablesListindex == 0){
                    this.$router.push({path:'/'})
                }else if(this.tablesListindex == 5){
                    this.$router.push({ path: "/views/Download",query: {index: 5}});
                }else if (this.tablesListindex == 3){
                    this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:3}})
                }else if (this.tablesListindex ==4){
                    this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:4}})
                }else{
                    this.$message({duration:600,message:'请先登录',type:'warning'})
                }
            }
                
                // if( this.tablesListindex == 0){
                //     this.$router.push({path:'/views/Learningcenter/Liveclassroom'})
                    
                // }else if(this.tablesListindex == 1){
                //     this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor'})
                    
                // }else if(this.tablesListindex == 2){
                //     this.$router.push({ path:'/views/Liveclassroom/ClassRoomInfo',})
                // }else if(this.tablesListindex == 3){
                //     this.$router.push({path:'/views/LiveScene/SceneRoomInfo'})
                // }else if(this.tablesListindex == 4){
                //     if(this.Isend ==true){
                //         this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
                //     }else if(this.Isend ==false){
                //         this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
                //     }
                // }else if(this.tablesListindex == 5){
                //     this.$router.push({ path:'/views/Listofinstitutions'})
                // }
        },
        Goindex(){
            this.$router.push({path:'/'})
        },
        reload () {
            this.isRouterAlive = false
            this.$nextTick(function () {
                this.isRouterAlive = true
            })
        },
        Modify(e){//前往个人设置中心
            this.$router.push(
                {
                    name:'Modifydata',
                    params: {
                        id: e
                    }
                })
        },
        TOlogin(){
            var data ={
                userID:this.unserinfo.user_id,
                accountType: '0',
                sdkAppID: 1400255047,
                userSig: this.unserinfo.sign,
                platform: "WeChat"
            }
            this.$axios({
                method:'post',
                url:'https://liveroom.qcloud.com/weapp/live_room/login',
                params:data,
                data: data,               
            }).then((res) =>{
                localStorage.setItem("token",res.data.token)
                TimLogin()
            }).catch((error) =>{
                console.log(error)
            })
        },
        Logout(){//退出登录
            localStorage.clear()
            this.$router.push({path:'/'})
            // var data ={
            //     userID:this.unserinfo.user_id,
            //     accountType: '0',
            //     sdkAppID: 1400255047,
            //     userSig: this.unserinfo.sign,
            //     token:localStorage.getItem('token')
            // }
            // this.$axios({
            //     method:'post',
            //     url:'https://liveroom.qcloud.com/weapp/live_room/logout',
            //     params:data,
            //     data: data,               
            // }).then((res) =>{
            //     localStorage.clear()
            //     this.$router.push({path:'/'}) 
            // }).catch((error) =>{
            //     console.log(error)
            // })
        },
    }
}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 40px;
  display: flex;
    margin-top: -46px;
  /deep/ .is-opened {
    background: none;
  }
  /deep/ .el-menu-demo {
    // width: 100%;
    background: none;
    border: none;
    margin-left: auto;
    /deep/ .el-submenu__title{
      background: none;
    }
    /deep/ .el-submenu__title:hover{
      background: none;
    }
  }
  
}
.login /deep/.el-submenu__title {
  width: 120px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  line-height: 40px !important;
  color: #64c6c9 !important;
}
.login button {
  width: 91px;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  border: none;
  margin-left: 10px;
  color: #64c6c9;
  cursor: pointer;
  outline: none;
}
.login button:last-child {
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.userAvatar{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: relative;
  top: 1px;
}
    .Personalicenter{
        width: 100%;
        min-width: 1400px;
    }
    .conetent-nav{
        position: fixed;
        display:flex;
        align-items: center;
        width: 100%;
        height: 80px;
        background: #47CECF;
        
    }
    .conetent-nav-head{
        position: relative;
        width: 1400px;
        height: 100%;
        margin:  0 auto;
        display: flex;
        align-items: center;
        ul{
            display: flex;
            list-style: none;
            width: 56.9%;
            height: 80px;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            margin-right: 45px;
            li{
                flex: 1;
                height: 100%;
                line-height: 80px;
                text-align: center;
                color: #FFFFFF;
                font-size: 18px;
                cursor: pointer;
            }
        }
    }
    .logo{
        width: 200px;
        height: 34px;
        cursor: pointer;
    }
    .selctestye{
        color: red;
        background:rgba(39,180,181,1);
    }
    .conetent-nav-head>ul>li:last-child{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .conetent-nav-info{
        width: 25px;
        height: 25px;
        margin-top: 26px;
    }
    .conetent-nav-my-center{
        text-align: center;
        margin-left: 4%;
        /deep/ .el-menu-demo{
            width: 100%;
            background: none;
            /deep/ .el-submenu__title{
                background: none;
            }
            /deep/ .el-submenu__title:hover{
                background: none;
            }
        }
    }
    .conetent-nav-my-center /deep/.el-submenu__title{
        width:120px!important;
        height:35px!important;
        background:rgba(255,255,255,1);
        border-radius:18px;
        margin-top: 20px!important;
        line-height: 40px!important;
        color: #64C6C9!important;
    }
</style>